
import React, { useState } from 'react';
import { Alert, Radio,Button, Space } from 'antd';
import type { RadioChangeEvent } from 'antd';
import {SettingOutlined,DeleteOutlined} from '@ant-design/icons'
import "./index.css"

const PayType = () => {
    
    const [visible, setVisible] = useState(true);

    const handleClose = () => {
        setVisible(false);
    };

    const [value, setValue] = useState(1);

    const onChange = (e: RadioChangeEvent) => {
      console.log('radio checked', e.target.value);
      setValue(e.target.value);
    };


    return (
        <>
            <Space direction="vertical" style={{ width: '100%' }} className='tipes'>
                {visible && (
                    <Alert showIcon message="注: 该支付方式启用并不能正常使用，需要开头支付功能才能使用相应的支付方式" type="info" closable afterClose={handleClose} />
                )}
                <p></p>
                {/* <Switch onChange={setVisible} checked={visible} disabled={visible} /> */}
            </Space>
            <div className="word">
                <span>支付方式</span>
            </div>
            <div className="type">
                <div className="Alipay">
                    <div className="top">
                        <img className='image' src="https://img2.baidu.com/it/u=3115157913,3139999054&fm=253&fmt=auto&app=138&f=JPEG?w=402&h=169" alt="" width='210' />
                        <p>支付宝(中国)网络技术有限公司是国内领先的第三方支付平台，致力于提供“简单、安全、快速”的支付解决方案</p>
                    </div>
                    <div className="center">
                        <Radio.Group onChange={onChange} value={value}>
                            <Radio value={1}>启用</Radio>
                            <Radio value={2}>关闭</Radio>
                        </Radio.Group>
                    </div>
                    <div className="bottom">
                        <Button type="primary" icon={<SettingOutlined />} style={{ backgroundColor:'#32CD32',borderColor:'#32CD32'}} >设置</Button>
                        <Button className='button' type="primary" icon={<DeleteOutlined />} danger >删除</Button>
                    </div>
                </div>
                <div className="wechat">
                    <div className="top">
                        <img src="https://img1.baidu.com/it/u=1267163159,442979264&fm=253&fmt=auto&app=138&f=JPEG?w=615&h=314" alt="" width='240' />
                        <p>支付宝(中国)网络技术有限公司是国内领先的第三方支付平台，致力于提供“简单、安全、快速”的支付解决方案</p>
                    </div>
                    <div className="center">
                        <Radio.Group onChange={onChange} value={value}>
                            <Radio value={1}>启用</Radio>
                            <Radio value={2}>关闭</Radio>
                        </Radio.Group>
                    </div>
                    <div className="bottom">
                        <Button type="primary" icon={<SettingOutlined />} style={{ backgroundColor:'#32CD32',borderColor:'#32CD32'}} >设置</Button>
                        <Button className='button' type="primary" icon={<DeleteOutlined />} danger >删除</Button>
                    </div>
                </div>
                <div className="UnionPay">
                    <div className="top">
                        <img src="https://img1.baidu.com/it/u=2207137370,4275183045&fm=253&fmt=auto&app=120&f=JPEG?w=550&h=300" alt="" width='230' />
                        <p>支付宝(中国)网络技术有限公司是国内领先的第三方支付平台，致力于提供“简单、安全、快速”的支付解决方案</p>
                    </div>
                    <div className="center">
                        <Radio.Group onChange={onChange} value={value}>
                            <Radio value={1}>启用</Radio>
                            <Radio value={2}>关闭</Radio>
                        </Radio.Group>
                    </div>
                    <div className="bottom">
                        <Button type="primary" icon={<SettingOutlined />} style={{ backgroundColor:'#32CD32',borderColor:'#32CD32'}} >设置</Button>
                        <Button className='button' type="primary" icon={<DeleteOutlined />} danger >删除</Button>
                    </div>
                </div>
                <div className="YeePay">
                    <div className="top">
                        <img src="https://img2.baidu.com/it/u=3453308260,953886994&fm=253&fmt=auto&app=138&f=JPEG?w=553&h=276" alt="" width='240' />
                        <p>支付宝(中国)网络技术有限公司是国内领先的第三方支付平台，致力于提供“简单、安全、快速”的支付解决方案</p>
                    </div>
                    <div className="center">
                        <Radio.Group onChange={onChange} value={value}>
                            <Radio value={1}>启用</Radio>
                            <Radio value={2}>关闭</Radio>
                        </Radio.Group>
                    </div>
                    <div className="bottom">
                        <Button type="primary" icon={<SettingOutlined />} style={{ backgroundColor:'#32CD32',borderColor:'#32CD32'}} >设置</Button>
                        <Button className='button' type="primary" icon={<DeleteOutlined />} danger >删除</Button>
                    </div>
                </div>
            </div>
        </>
    )
}

export default PayType